<script>
  import util from "@/util/util.js"
  
  export default {
    data(){
      return {
        avatarGroupList: [
          {src: util.getStaticURL("/images/avatar/xiaomai1.jpg")},
          {src: util.getStaticURL("/images/avatar/xiaomai2.jpg")},
          {src: util.getStaticURL("/images/avatar/xiaomai1.jpg")},
          {src: util.getStaticURL("/images/avatar/xiaomai2.jpg")},
        ]
      }
    }
  }
</script>

<template>
  <view class="components-list tn-safe-area-inset-bottom">
    <tn-nav-bar>列表项单独使用</tn-nav-bar>
    <view :style="{paddingTop: vuex_custom_bar_height+'px'}">
      <!-- 普通列表 -->
      <view>
        <tn-list-cell>普通列表</tn-list-cell>
      </view>
      <!-- 圆角列表 -->
      <view class="tn-margin-top-sm">
        <tn-list-cell radius>
          圆角列表
        </tn-list-cell>
      </view>
      <!-- 图标+文字 -->
      <view class="tn-margin-top-sm">
        <tn-list-cell>
          <view class="list-icon-text">
            <view class="list__left">
              <view class="list__left__icon tn-icon-discover tn-color-gray"></view>
              <view class="list__left__text">图标+文字</view>
            </view>
          </view>
        </tn-list-cell>
      </view>
      <!-- 图片+文字 -->
      <view class="tn-margin-top-sm">
        <tn-list-cell>
          <view class="list-icon-text">
            <view class="list__left">
              <image src="/static/favicon.ico" class="list__left__image"></image>
              <view>图片+文字</view>
            </view>
          </view>
        </tn-list-cell>
      </view>
      <!-- 文本 -->
      <view class="tn-margin-top-sm">
        <tn-list-cell>
          <view class="list-icon-text">
            <view class="list__left">
              <view class="list__left__icon tn-icon-order tn-color-indigo"></view>
              <view class="list__left__text">文本</view>
            </view>
            <view class="list__right">
              <view class="tn-text-sm tn-color-gray">学习Python</view>
            </view>
          </view>
        </tn-list-cell>
      </view>
      <!-- 按钮 -->
      <view class="tn-margin-top-sm">
        <tn-list-cell>
          <view class="list-icon-text">
            <view class="list__left">
              <view class="list__left__icon tn-icon-upload tn-color-indigo"></view>
              <view class="list__left__text">按钮</view>
            </view>
            <view class="list__right">
              <tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" shape="round" size="sm">
                <text class="tn-cion-upload tn-margin-right-xs"></text> 上传
              </tn-button>
            </view>
          </view>
        </tn-list-cell>
      </view>
      <!-- 标签 -->
      <view class="tn-margin-top-sm">
        <tn-list-cell>
          <view class="list-icon-text">
            <view class="list__left">
              <view class="list__left__icon tn-icon-tag tn-text-clip tn-main-gradient-orangeyellow"></view>
              <view class="list__left__text">标签</view>
            </view>
            <view class="list__right">
              <tn-tag backgroundColor="tn-main-gradient-indigo" shape="circle" margin="0 5rpx">篮球</tn-tag>
              <tn-tag backgroundColor="tn-main-gradient-indigo" shape="circle" margin="0 5rpx">足球</tn-tag>
              <tn-tag backgroundColor="tn-main-gradient-indigo" shape="circle" margin="0 5rpx">冰球</tn-tag>
            </view>
          </view>
        </tn-list-cell>
      </view>
      <!-- 头像组 -->
      <view class="tn-margin-top-sm">
        <tn-list-cell>
          <view class="list-icon-text">
            <view class="list__left">
              <view class="list__left__icon tn-icon-emoji-good tn-text-clip tn-main-gradient-orangeyellow"></view>
              <view class="list__left__text">头像组</view>
            </view>
            <view class="list__right">
              <tn-avatar-group :lists="avatarGroupList" size="sm"></tn-avatar-group>
            </view>
          </view>
        </tn-list-cell>
      </view>
    </view>
    <view class="tn-padding-bottom-lg"></view>
  </view>
</template>


<style lang="scss" scoped>
  .components-list {
    background-color: $tn-bg-gray-color;
    min-height: 100vh;
  }
  .list-icon-text {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .list__left {
    display: flex;
    align-items: center;
    gap: 10rpx;
    
    .list__left__image {
      width: 30rpx;
      height: 30rpx;
    }
  }
</style>